<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>图片垂直居中对齐的3种方法</title>
        <style>
            ul{
                list-style:none;
            }
            li{
                margin: 0;
            }
            .middle-box{height:300px; border: 1px solid #f00; width: 400px; margin: 0 auto; text-align: center; }
            .middle-box img{vertical-align: middle; }
            .visible{height: 100%; vertical-align: middle; width: 0; display: inline-block;}
            .zxx_align_box_4 li{float:left; margin-right:13px;}
            .zxx_align_box_4 li div{display:table-cell;  width:144px; height:144px;border:1px solid #beceeb; font-size:118px; text-align:center; vertical-align:middle;}
            .fix{
                zoom:1;
            }
            .fix:after, .fix:before {
                display: table;
                content: "";
                clear: both;
            }
            .zxx_align_box_4 li div img{vertical-align:middle;}
            .zxx_align_box_5 a{display:inline-block; width:1.2em; font-size:128px; text-align:center; vertical-align:middle;}
            .zxx_align_box_5 a img{vertical-align:middle; padding:2px; border:1px solid #beceeb;}
            .zxx_align_box_3 li{width:1em; height:1em; padding:0.1em; margin:0 0.1em 0 0; font-size:128px; float:left; border:1px solid #beceeb;}
            .zxx_align_box_3 li img{display:block; width:100%; height:100%; background-repeat:no-repeat; background-position:center;}
            .zxx_align_box_6 li{height:128px; width:150px; padding:13px 0; float:left; margin-right:10px; border:1px solid #beceeb; text-align:center; font-size:0;}
            .zxx_align_box_6 li .alpha_img{height:100%; width:1px; vertical-align:middle;}
            .zxx_align_box_6 li .show_img{vertical-align:middle;}
            .zxx_ul_image{overflow:hidden; zoom:1;}
            .zxx_ul_image li{float:left; width:150px; height:150px; text-align:center; line-height:150px; *font-size:125px;}
            .zxx_ul_image li:after{content:' '; vertical-align:middle;}
            .zxx_ul_image li img{vertical-align:middle;}
        </style>
    </head>
    <body>
        <h1>图片垂直居中对齐的3种方法</h1>
        <p>来源:<a href="http://caibaojian.com/vertical-centering-with-css.html">http://caibaojian.com/vertical-centering-with-css.html</a></p>
        <div class="middle-box">
            <img src="img/tourism2.png"/>
            <i class="visible"></i>
        </div>
        <h2>1.使用display:table-cell加文字大小控制居中</h2>
        <ul class="zxx_align_box_4 fix">
            <li> <div><img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" /></div> </li>
            <li> <div><img src="http://image.zhangxinxu.com/image/study/s/s128/mm2.jpg" /></div> </li>
        </ul>
        <h2>2.透明gif图片+背景定位</h2>
        <ul class="zxx_align_box_3 fix">
            <li>
                <img src="img/pixel.gif" style="background-image:url(http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg);" />
            </li>
            <li>
                <img src="img/pixel.gif" style="background-image:url(http://image.zhangxinxu.com/image/study/s/s128/mm2.jpg);" />
            </li>
        </ul>
        <h2>3.display:inline-block和文字大小控制居中</h2>
        <div class="zxx_align_box_5 fix">
            <a href="#zhangxinxu">
                <img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" />
            </a>
            <a href="#zhangxinxu">
                <img src="http://image.zhangxinxu.com/image/study/s/s128/mm2.jpg" />
            </a>
            <a href="#zhangxinxu">
                <img src="http://image.zhangxinxu.com/image/study/s/s128/mm3.jpg">
            </a>
            <a href="#zhangxinxu">
                <img src="http://image.zhangxinxu.com/image/study/s/s128/mm4.jpg">
            </a>
        </div>
        <h2>4.使用空白图片实现垂直对齐</h2>
        <ul class="zxx_align_box_6 fix">
            <li>
                <img class="show_img" src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" />
                <img class="alpha_img" src="img/pixel.gif" />
            </li>
        </ul>
        <ul class="zxx_ul_image">
            <li><img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" /></li>
            <li><img src="http://image.zhangxinxu.com/image/study/s/s128/mm2.jpg" /></li>
            <li><img src="http://image.zhangxinxu.com/image/study/s/s128/mm3.jpg" /></li>
            <li><img src="http://image.zhangxinxu.com/image/study/s/s128/mm4.jpg" /></li>
            <li><img src="http://image.zhangxinxu.com/image/study/s/s128/mm5.jpg" /></li>
            <li><img src="http://image.zhangxinxu.com/image/study/s/s128/mm6.jpg" /></li>  
        </ul>
        <!-- <div class="zxx_align_box_5 fix"> 
            <a href="#"> <img src="img/tourism2.png" /> </a> 
            <a href="#"> <img src="img/tourism2.png" /> </a> 
        </div> -->

    </body>
</html>